import { h } from "vue";
import { User } from "@/types/user";
import {
    UserPrediction,
    MonthlyWeatherPrediction,
    DailyWeatherPrediction,
    StockPrediction,
    ElectricityPrediction,
} from "@/types/prediction";
import { Problem } from "@/types/problem";
import {
    NTag,
    NDivider,
    NButton,
    NImage,
    NDropdown,
    DataTableColumns,
} from "naive-ui";

// 客户表格表头
export const customerColumns = (
    editFunc: Function,
    resetFunc: Function,
    deleteFunc: Function
): DataTableColumns<User> => [
    {
        title: "头像",
        key: "avatar",
        align: "center",
        render(row) {
            return h(NImage, {
                height: 36,
                width: 36,
                src: row.avatar
                    ? row.avatar
                    : new URL("@/assets/icon/empty-avatar.svg", import.meta.url)
                          .href,
            });
        },
    },
    {
        title: "账号",
        key: "account",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "用户名",
        key: "userName",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "邮箱",
        key: "email",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "注册时间",
        key: "createTime",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
        render: (row) => {
            return new Date(row.createTime).toLocaleString();
        },
    },
    {
        title: "是否冻结",
        key: "frozen",
        align: "center",
        render: (row) => {
            return h(
                NTag,
                {
                    type: row.frozen ? "error" : "success",
                },
                {
                    default: () => (row.frozen ? "是" : "否"),
                }
            );
        },
    },
    {
        title: "操作",
        key: "action",
        width: 260,
        fixed: "right",
        render(row) {
            return h("div", { class: "flex-center gap-10px" }, [
                h(
                    NButton,
                    {
                        size: "small",
                        secondary: true,
                        onClick: () => editFunc(row),
                    },
                    () => {
                        return "编辑";
                    }
                ),
                h(NDivider, { vertical: true }),
                h(
                    NButton,
                    {
                        size: "small",
                        type: "info",
                        secondary: true,
                        onClick: () => resetFunc(row),
                    },
                    () => {
                        return "重置密码";
                    }
                ),
                h(NDivider, { vertical: true }),
                h(
                    NButton,
                    {
                        size: "small",
                        type: "error",
                        secondary: true,
                        onClick: () => deleteFunc(row),
                    },
                    () => {
                        return "删除";
                    }
                ),
            ]);
        },
        align: "center",
    },
];

// 管理员表格表头
export const adminColumns = (
    editFunc: Function,
    resetFunc: Function,
    deleteFunc: Function
): DataTableColumns<User> => [
    {
        title: "账号",
        key: "account",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "用户名",
        key: "userName",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "注册时间",
        key: "createTime",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
        render: (row) => {
            return new Date(row.createTime).toLocaleString();
        },
    },
    {
        title: "是否冻结",
        key: "frozen",
        align: "center",
        render: (row) => {
            return h(
                NTag,
                {
                    type: row.frozen ? "error" : "success",
                },
                {
                    default: () => (row.frozen ? "是" : "否"),
                }
            );
        },
    },
    {
        title: "操作",
        key: "action",
        width: 260,
        render(row) {
            return h("div", { class: "flex-center gap-10px" }, [
                h(
                    NButton,
                    {
                        size: "small",
                        secondary: true,
                        onClick: () => editFunc(row),
                    },
                    () => {
                        return "编辑";
                    }
                ),
                h(NDivider, { vertical: true }),
                h(
                    NButton,
                    {
                        size: "small",
                        type: "info",
                        secondary: true,
                        onClick: () => resetFunc(row),
                    },
                    () => {
                        return "重置密码";
                    }
                ),
                h(NDivider, { vertical: true }),
                h(
                    NButton,
                    {
                        size: "small",
                        type: "error",
                        secondary: true,
                        onClick: () => deleteFunc(row),
                    },
                    () => {
                        return "删除";
                    }
                ),
            ]);
        },
        align: "center",
    },
];

// 用户预测记录表格表头
export const userPredictionColumns = (
    deleteFunc: Function,
    downloadFunc: Function,
    fileCheckFunc: Function
): DataTableColumns<UserPrediction> => [
    {
        title: "记录id",
        key: "id",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "用户id",
        key: "customerId",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: "源文件",
        key: "sourceFile",
        align: "center",
        width: 400,
        ellipsis: {
            tooltip: true,
        },
        render: (row) => {
            return h(
                "a",
                {
                    href: row.sourceFile,
                    target: "_blank",
                    onClick(e: MouseEvent) {
                        e.preventDefault();
                        fileCheckFunc(row.sourceFile);
                    },
                },
                row.sourceFile
            );
        },
    },
    {
        title: "预测结果",
        key: "predictResult",
        align: "center",
        width: 400,
        ellipsis: {
            tooltip: true,
        },
        render: (row) => {
            return h(
                "a",
                {
                    href: row.predictResult,
                    target: "_blank",
                    onClick(e: MouseEvent) {
                        e.preventDefault();
                        fileCheckFunc(row.predictResult);
                    },
                },
                row.predictResult
            );
        },
    },
    {
        title: "请求时间",
        key: "requestTime",
        align: "center",
        render: (row) => {
            return new Date(row.requestTime).toLocaleString();
        },
    },
    {
        title: "操作",
        key: "action",
        width: 260,
        fixed: "right",
        render: (row) => {
            const options = [
                {
                    label: "源文件",
                    key: "sourceFile",
                },
                {
                    label: "预测结果",
                    key: "predictResult",
                },
            ];

            return h("div", { class: "flex-center gap-10px" }, [
                h(
                    NDropdown,
                    {
                        trigger: "hover",
                        options: options,
                        onSelect: (key) =>
                            downloadFunc(
                                row[key as "sourceFile" | "predictResult"]
                            ),
                    },
                    {
                        default: () =>
                            h(
                                NButton,
                                {
                                    size: "small",
                                    secondary: true,
                                },
                                { default: () => "下载文件" }
                            ),
                    }
                ),
                h(NDivider, { vertical: true }),
                h(
                    NButton,
                    {
                        size: "small",
                        type: "error",
                        secondary: true,
                        onClick: () => deleteFunc(row.id),
                    },
                    { default: () => "删除" }
                ),
            ]);
        },
        align: "center",
    },
];

// 用户预测文件详情表头
export const fileDetailColumns: DataTableColumns<DailyWeatherPrediction> = [
    {
        title: "序号",
        key: "index",
        align: "center",
    },
    {
        title: "日期",
        key: "date",
        align: "center",
        defaultSortOrder: false,
        sorter: (a, b) =>
            new Date(a.date).getTime() - new Date(b.date).getTime(),
    },
    {
        title: "最高温度(°)",
        key: "T_max",
        align: "center",
    },
    {
        title: "最低温度(°)",
        key: "T_min",
        align: "center",
    },
    {
        title: "大气压强(Pa)",
        key: "P",
        align: "center",
    },
    {
        title: "相对湿度(%)",
        key: "U",
        align: "center",
    },
    {
        title: "风向",
        key: "DD",
        align: "center",
    },
    {
        title: "风速(m/s)",
        key: "Ff",
        align: "center",
    },
];

// 月天气预测记录表格表头
export const monthlyWeatherColumns: DataTableColumns<MonthlyWeatherPrediction> =
    [
        {
            title: "序号",
            key: "index",
            align: "center",
            defaultSortOrder: false,
            sorter: (a, b) => a.index - b.index,
        },
        {
            title: "日期",
            key: "date",
            align: "center",
            defaultSortOrder: false,
            sorter: (a, b) =>
                new Date(a.date).getTime() - new Date(b.date).getTime(),
        },
        {
            title: "大气压强(Pa)",
            key: "P",
            align: "center",
            sorter: (a, b) => a.P - b.P,
        },
        {
            title: "相对湿度(%)",
            key: "U",
            align: "center",
            sorter: (a, b) => a.U - b.U,
        },
        {
            title: "风向",
            key: "DD",
            align: "center",
        },
        {
            title: "风速(m/s)",
            key: "Ff",
            align: "center",
            sorter: (a, b) => a.Ff - b.Ff,
        },
        {
            title: "最高温度(°C)",
            key: "T_max",
            align: "center",
            sorter: (a, b) => a.T_max - b.T_max,
        },
        {
            title: "最低温度(°C)",
            key: "T_min",
            align: "center",
            sorter: (a, b) => a.T_min - b.T_min,
        },
        {
            title: "天气概况",
            key: "abstract",
            align: "center",
            ellipsis: {
                tooltip: true,
            },
        },
    ];

// 每日天气预测表格表头
export const dailyWeatherColumns: DataTableColumns<DailyWeatherPrediction> = [
    {
        title: "序号",
        key: "index",
        align: "center",
        sorter: (a, b) => a.index - b.index,
    },
    {
        title: "日期",
        key: "date",
        align: "center",
        sorter: (a, b) =>
            new Date(a.date).getTime() - new Date(b.date).getTime(),
    },
    {
        title: "大气压强(Pa)",
        key: "P",
        align: "center",
        sorter: (a, b) => a.P - b.P,
    },
    {
        title: "相对湿度(%)",
        key: "U",
        align: "center",
        sorter: (a, b) => a.U - b.U,
    },
    {
        title: "风向",
        key: "DD",
        align: "center",
    },
    {
        title: "风速(m/s)",
        key: "Ff",
        align: "center",
        sorter: (a, b) => a.Ff - b.Ff,
    },
    {
        title: "海平面气压(Pa)",
        key: "P0",
        align: "center",
        sorter: (a, b) => a.P0 - b.P0,
    },
    {
        title: "露点温度(°C)",
        key: "Td",
        align: "center",
        sorter: (a, b) => a.Td - b.Td,
    },
    {
        title: "温度(°C)",
        key: "T",
        align: "center",
        sorter: (a, b) => a.T - b.T,
    },
    {
        title: "天气概况",
        key: "abstract",
        align: "center",
        ellipsis: {
            tooltip: true,
        },
    },
];

// 股票预测记录表格表头
export const stockPredictionColumns: DataTableColumns<StockPrediction> = [
    {
        title: "序号",
        key: "index",
        align: "center",
        defaultSortOrder: false,
        sorter: (a, b) => a.index - b.index,
    },
    {
        title: "日期",
        key: "date",
        align: "center",
        defaultSortOrder: false,
        sorter: (a, b) =>
            new Date(a.date).getTime() - new Date(b.date).getTime(),
    },
    {
        title: "开盘价",
        key: "open_price",
        align: "center",
        sorter: (a, b) => a.open_price - b.open_price,
    },
    {
        title: "收盘价",
        key: "close_price",
        align: "center",
        sorter: (a, b) => a.close_price - b.close_price,
    },
    {
        title: "最低价",
        key: "low",
        align: "center",
        sorter: (a, b) => a.low - b.low,
    },
    {
        title: "最高价",
        key: "high",
        align: "center",
        sorter: (a, b) => a.high - b.high,
    },
    {
        title: "涨跌幅",
        key: "pct_change",
        align: "center",
        sorter: (a, b) => a.pct_change - b.pct_change,
        render: (row) => `${(row.pct_change * 100).toFixed(2)}%`,
    },
    {
        title: "成交量",
        key: "volume",
        align: "center",
        sorter: (a, b) => a.volume - b.volume,
    },
];

// 电力预测记录表格表头
export const electricityPredictionColumns: DataTableColumns<ElectricityPrediction> =
    [
        {
            title: "日期",
            key: "date",
            align: "center",
            defaultSortOrder: false,
            sorter: (a, b) =>
                new Date(a.date).getTime() - new Date(b.date).getTime(),
        },
        {
            title: "白云区",
            key: "baiyun",
            align: "center",
            sorter: (a, b) => a.baiyun - b.baiyun,
        },
        {
            title: "从化区",
            key: "conghua",
            align: "center",
            sorter: (a, b) => a.conghua - b.conghua,
        },
        {
            title: "海珠区",
            key: "haizhu",
            align: "center",
            sorter: (a, b) => a.haizhu - b.haizhu,
        },
        {
            title: "花都区",
            key: "huadu",
            align: "center",
            sorter: (a, b) => a.huadu - b.huadu,
        },
        {
            title: "黄埔区",
            key: "huangpu",
            align: "center",
            sorter: (a, b) => a.huangpu - b.huangpu,
        },
        {
            title: "荔湾区",
            key: "liwan",
            align: "center",
            sorter: (a, b) => a.liwan - b.liwan,
        },
        {
            title: "南沙区",
            key: "nansha",
            align: "center",
            sorter: (a, b) => a.nansha - b.nansha,
        },
        {
            title: "番禺区",
            key: "panyu",
            align: "center",
            sorter: (a, b) => a.panyu - b.panyu,
        },
        {
            title: "天河区",
            key: "tianhe",
            align: "center",
            sorter: (a, b) => a.tianhe - b.tianhe,
        },
        {
            title: "越秀区",
            key: "yuexiu",
            align: "center",
            sorter: (a, b) => a.yuexiu - b.yuexiu,
        },
        {
            title: "增城区",
            key: "zengcheng",
            align: "center",
            sorter: (a, b) => a.zengcheng - b.zengcheng,
        },
    ];

// 问题反馈记录表格表头
export const problemColumns = (
    responseFunc: (row: Problem) => void,
    deleteFunc: (row: Problem) => void,
    status: 0 | 1
) => {
    const baseColumns = [
        {
            title: "用户ID",
            key: "customerId",
            align: "center",
            ellipsis: {
                tooltip: true,
            },
        },
        {
            title: "问题标题",
            key: "title",
            align: "center",
            ellipsis: {
                tooltip: true,
            },
        },
        {
            title: "问题描述",
            key: "description",
            align: "center",
            ellipsis: {
                tooltip: true,
            },
        },
        {
            title: "提交时间",
            key: "submitTime",
            align: "center",
            render: (row: Problem) => {
                return new Date(row.submitTime).toLocaleString();
            },
        },
    ];

    const conditionalColumns =
        status === 1
            ? [
                  {
                      title: "答复时间",
                      key: "responseTime",
                      align: "center",
                      render: (row: Problem) => {
                          return new Date(row.responseTime).toLocaleString();
                      },
                  },
                  {
                      title: "答复内容",
                      key: "response",
                      align: "center",
                      ellipsis: {
                          tooltip: true,
                      },
                  },
              ]
            : [];

    const actionColumn = [
        {
            title: "操作",
            key: "action",
            width: 260,
            fixed: "right",
            render(row: Problem) {
                const children = [];
                children.push(
                    h(
                        NButton,
                        {
                            size: "small",
                            secondary: true,
                            focusable: false,
                            onClick: () => responseFunc(row),
                        },
                        () => {
                            return status === 0 ? "答复" : "修改答复";
                        }
                    )
                );
                // 如果没有答复的无法删除
                if (row.status === 1) {
                    children.push(h(NDivider, { vertical: true }));
                    children.push(
                        h(
                            NButton,
                            {
                                size: "small",
                                type: "error",
                                secondary: true,
                                focusable: false,
                                onClick: () => deleteFunc(row),
                            },
                            () => {
                                return "删除";
                            }
                        )
                    );
                }
                return h("div", { class: "flex-center gap-10px" }, children);
            },
            align: "center",
        },
    ];

    return [...baseColumns, ...conditionalColumns, ...actionColumn];
};
